<template>
  <div ref="dom" class="statistics">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Statistics',
  props: {
    // 时间段
    date: {}
  },
  data() {
    return {
      dom: null,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '3%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            seriesLayoutBy: 'row',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '新增用户',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#2d8cf0'
            }},
            data: [1, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '红包',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#10A6FF'
            }},
            data: [10, 358, 278, 234, 290, 330, 310]
          },
          {
            name: '收入',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#0C17A6'
            }},
            data: [1.34, 268, 354, 269, 310, 478, 358]
          }
        ]
      }
    }
  },
  watch: {
    date(value) {
      let data = []
      if (value[0] !== '') {
        data = value
      } else {
        data = this.getAWeekDate()
      }
      data = this.getBetweenDate(data[0], data[1])
      this.option.xAxis[0].data = data
      this.dom.setOption(this.option)
      this.getData(data)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化统计表
    init() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom)
          this.dom.setOption(this.option)
          this.getAWeekDate()
        })
      }, 500)
    },
    // 获取一周内开始如期和结束日期
    getAWeekDate() {
      const date = []
      for (let i = 0; i < 7; i += 6) {
        const now_timestamp = parseInt(new Date().getTime() / 1000)
        const timestamp = now_timestamp - (86400 * i)
        const D = new Date(timestamp * 1000)
        const year = D.getFullYear()
        const month = D.getMonth() + 1
        let day = D.getDate()
        day = day < 10 ? '0' + day : day
        const str_date = year + '-' + month + '-' + day
        date.unshift(str_date)
      }
      this.$emit('init', date)
      return date
    },
    // 获取指定两个日期的区间日期返回数组
    getBetweenDate(start_date, end_date) {
      let start_time = parseInt(new Date(start_date).getTime() / 1000)
      const end_time = parseInt(new Date(end_date).getTime() / 1000)
      const date = [start_date]
      while (start_time < end_time) {
        start_time += 86400
        const D = new Date(start_time * 1000)
        const year = D.getFullYear()
        const month = D.getMonth() + 1
        let day = D.getDate()
        day = day < 10 ? '0' + day : day
        const str_date = year + '-' + month + '-' + day
        date.unshift(str_date)
      }
      return date
    },
    // 请求数据
    getData(value) {
      this.$get('home/getStatisticsDate', {
        date: value
      })
        .then((res) => {
          const data = res.data.data
          this.option.series[0].data = data.member
          this.option.series[1].data = data.red_number
          this.option.series[2].data = data.income
          this.dom.setOption(this.option)
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .statistics{
    height: 300px;
  }
</style>
